<template>
	<div>
		<van-nav-bar title="KH-005-50.分管站长审批" left-text="返回" left-arrow @click-left="onClickLeft" />
		<Collapse simple v-model="Collapsejbxx">
			<Panel name="1">
				基本信息
				<div slot="content">
					<van-cell-group>
						<van-field label="流程申请编号" value="1611000297902" clickable="true" readonly input-align="right" />
						<van-field label="流程类别" value="过户流程(KH-005)" clickable="true" readonly input-align="right" />
					</van-cell-group>
				</div>
			</Panel>
		</Collapse>
		<Collapse simple v-model="Collapsekhxx">
			<Panel name="1">
				客户详细信息
				<div slot="content">
					<!-- <ul>
						<li>
							<lable class="lbleft">客户编号：</lable>
							<lable class="lbleft">FX044580422</lable>
						</li>
						<li>
							<lable class="lbleft">集团客户编号：</lable>
							<lable class="lbleft">FX044580422</lable>
						</li>
					</ul> -->
					<van-cell-group>
						<van-field label="客户编号" value="FX044580422" clickable="true" readonly input-align="right" width="48%"/>
						<van-field label="客户名称" value="晓轩" clickable="true" readonly input-align="right" />
						<van-field label="集团客户编号" value="" clickable="true" readonly input-align="right" />
						<van-field label="集团客户名称" value="" clickable="true" readonly input-align="right" />
						<van-field label="客户类型" value="居民" clickable="true" readonly input-align="right" />
						<van-field label="证件类型" value="身份证" clickable="true" readonly input-align="right" />
						<van-field label="休息日" value="" clickable="true" readonly input-align="right" />
						<van-field label="信用等级" value="" clickable="true" readonly input-align="right" />
						<van-field label="电子邮件" value="" clickable="true" readonly input-align="right" />
						<van-field label="法人" value="" clickable="true" readonly input-align="right" />
						<van-field label="增值税号" value="" clickable="true" readonly input-align="right" />
						<van-field label="是否电子发票用户" clickable="true" value="否" readonly input-align="right" />
						<van-field label="敏感用户性质" value="" clickable="true" readonly input-align="right" />
						<van-field label="联系人" value="" clickable="true" readonly input-align="right" />
						<van-field label="固话" value="" clickable="true" readonly input-align="right" />
						<van-field label="手机" value="18817891048" clickable="true" readonly input-align="right" />
						<van-field label="房产证件号码" value="" clickable="true" readonly input-align="right" />
					</van-cell-group>
				</div>
			</Panel>
		</Collapse>
		<Collapse simple v-model="Collapsebkxx">
			<Panel name="1">
				客户表卡列表
				<div slot="content">
					<el-table :data="tableData" style="width: 100%">
						<el-table-column prop="ceben" label="册本">
						</el-table-column>
						<el-table-column prop="huhao" label="户号">
						</el-table-column>
						<el-table-column prop="yonghuming" label="用户名">
						</el-table-column>
						<el-table-column prop="dizhi" label="地址">
						</el-table-column>

					</el-table>
				</div>
			</Panel>
		</Collapse>
		<Collapse simple v-model="Collapselxrxx">
			<Panel name="1">
				主要联系人信息
				<div slot="content">
					<van-cell-group>
						<van-field label="名称" value="江建华" error clickable="true" readonly input-align="right" />
						<van-field label="类别" value="户主及家庭" error clickable="true" readonly input-align="right" />
						<van-field label="地址" value="" readonly input-align="right" />
						<van-field label="状态" value="正常" readonly input-align="right" />
						<van-field label="邮寄地址" value="" readonly input-align="right" />
						<van-field label="邮编" value="" readonly input-align="right" />
						<van-field label="固话" value="" readonly input-align="right" />
						<van-field label="手机" value="13764222671" error readonly input-align="right" />
						<van-field label="电子邮件" value="" readonly input-align="right" />
						<van-field label="备注" value="1040" readonly input-align="right" />
						<van-field label="简号" value="13工房住宅按套室(按户)装表" readonly input-align="right" />
					</van-cell-group>
					<el-table :data="tableDataJT" style="width: 100%;margin-bottom: 20px;" row-key="id" border
						default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
						<el-table-column prop="feiyongmc" label="费用名称" width="100">
						</el-table-column>
						<el-table-column prop="jiage" label="价格" width="100">
						</el-table-column>
						<el-table-column prop="ksyue" label="开始月">
						</el-table-column>
						<el-table-column prop="jsyue" label="结束月">
						</el-table-column>
						<el-table-column prop="kssl" label="开始水量">
						</el-table-column>
						<el-table-column prop="jssl" label="结束水量">
						</el-table-column>
					</el-table>
				</div>
			</Panel>
		</Collapse>
		<Collapse simple v-model="Collapsespxx">
			<Panel name="1">
				审批信息
				<div slot="content">
					<van-cell-group>
						<van-field label="申请人" value="程喜华"  clickable="true" readonly input-align="right" />
						<van-field label="申请日期" value="2021-09-02" error clickable="true" readonly input-align="right" />
						<van-field label="操作人" value="admin" readonly input-align="right" />
						<van-field label="操作日期" value="2021-09-03" readonly input-align="right" />
						
					</van-cell-group>
					<van-cell center title="审批结果">
					  <template #right-icon>
					    <van-switch v-model="shenpichecked" size="24" />
					  </template>
					</van-cell>
					<van-button type="primary">文件列表</van-button>
					<van-field
					  v-model="message"
					  rows="2"
					  autosize
					  label="审批意见"
					  type="textarea"
					  maxlength="500"
					  placeholder="请输入审批意见"
					  show-word-limit
					/>
					<van-field
					  v-model="message"
					  rows="2"
					  autosize
					  label="审批备注"
					  type="textarea"
					  maxlength="500"
					  placeholder="请输入审批备注"
					  show-word-limit
					/>
					<van-button @click="shenpitijiao()" color="linear-gradient(to right, #0055ff, #bc3dee)"  block>
					  提交
					</van-button>
					<van-button @click="shenpifanhui()" color="linear-gradient(to right, #ffa947, #eec729)"  block>
					  返回
					</van-button>
				</div>
			</Panel>
		</Collapse>
		<van-notify v-model="tijiaotishishow" type="success">
		  <van-icon name="bell" style="margin-right: 4px;" />
		  <span>提交成功</span>
		</van-notify>
	</div>
</template>

<script>
	import Vue from "vue";
	import axios from "axios";
	import {
		NavBar
	} from 'vant';
	Vue.use(NavBar);
	import {
		Divider
	} from 'vant';

	Vue.use(Divider);

	import {
		Loading
	} from "element-ui";
	import {
		Image as VanImage
	} from "vant";
	import {
		Toast
	} from "vant";
	import {
		Notify
	} from "vant";
	import {
		Rate
	} from "vant";
	import {
		Dialog
	} from "vant";
	Vue.use(Rate);
	const token = "123456";
	export default {

		data() {
			return {
				activeName: "",
				Collapsejbxx: 1,
				Collapsekhxx: 1,
				Collapsebxxx: 1,
				Collapselxrxx: 1,
				Collapsespxx: 1,
				shenpichecked:true,
				tijiaotishishow:false,
				tableData: [{
					ceben: '16809006',
					huhao: '160110789',
					yonghuming: '晓轩',
					dizhi: '西渡鸿宝一村31幢55号402室'
				}],
				tableDataJT: [{
						id: 1,
						feiyongmc: '阶梯：1',
						jiage: '价格：3.62',
						ksyue: '',
						jsyue: '',
						kssl: '',
						jssl: '',
						children: [{
							id: 11,
							feiyongmc: '用水费',
							jiage: '1.92',
							ksyue: '1',
							jsyue: '12',
							kssl: '0',
							jssl: '220',
						}, {
							id: 12,
							feiyongmc: '排水费',
							jiage: '1.70',
							ksyue: '1',
							jsyue: '12',
							kssl: '0',
							jssl: '220',
						}]
					}, {
						id: 2,
						feiyongmc: '阶梯：2',
						jiage: '价格：5.00',
						ksyue: '',
						jsyue: '',
						kssl: '',
						jssl: '',
						children: [{
							id: 21,
							feiyongmc: '用水费',
							jiage: '3.30',
							ksyue: '1',
							jsyue: '12',
							kssl: '221',
							jssl: '300',
						}, {
							id: 22,
							feiyongmc: '排水费',
							jiage: '1.70',
							ksyue: '1',
							jsyue: '12',
							kssl: '221',
							jssl: '300',
						}]
					},
					{
						id: 3,
						feiyongmc: '阶梯：3',
						jiage: '价格：6.00',
						ksyue: '',
						jsyue: '',
						kssl: '',
						jssl: '',
						children: [{
							id: 31,
							feiyongmc: '用水费',
							jiage: '4.30',
							ksyue: '1',
							jsyue: '12',
							kssl: '301',
							jssl: '-1',
						}, {
							id: 32,
							feiyongmc: '排水费',
							jiage: '1.70',
							ksyue: '1',
							jsyue: '12',
							kssl: '301',
							jssl: '-1',
						}]
					}
				]
			}
		},
		created() {
			this.http
				.get(
					"http://128.1.8.42:7788/map/SearchMapByDizhi?address=%E7%BA%AA%E5%BF%B5%E8%B7%AF"
				)
				.then((res) => {
					console.log(res.data);
				});
		},
		methods: {
			onClickLeft() {

			},
			shenpitijiao(){
				this.tijiaotishishow=true;
				setTimeout(() => {
				        this.tijiaotishishow = false;
				      }, 3000);
			},
		},

	}
</script>

<style>
	li {
		float: left;
		max-width: 48%;
	}
</style>
